import BaseComponent from "../../pages/BaseComponent";
import './index.less';
import {View} from "@tarojs/components";
import LogService from "../../service/LogService";
import Switch from "../base/Switch";
import ModalMask from "../TimeChoseModal/ModalMask";
import TimeChoseModal from "../TimeChoseModal/TimeChoseModal";
import {observable} from "mobx";
import {observer} from "mobx-react";

@observer
export default class OCTime extends BaseComponent {

  @observable showChoseTime = false;
  @observable checked = false;

  @observable hOpen = "00";
  @observable mOpen = "00";
  @observable hClose = "00";
  @observable mClose = "00";

  onComfire = (choseHO, choseMO, choseHC, choseMC) => {
    this.showChoseTime = false;
    this.hOpen = choseHO;
    this.mOpen = choseMO;
    this.hClose = choseHC;
    this.mClose = choseMC;
    LogService.debug("onComfire", choseHO, choseMO, choseHC, choseMC);

    const {onChange} = this.props;
    if (!!onChange)
      onChange(this.checked, this.hOpen, this.mOpen, this.hClose, this.mClose);
  }

  onChange = () => {
    this.checked = !this.checked;
    LogService.debug("Switch onChange", this.checked);

    const {onChange} = this.props;
    if (!!onChange)
      onChange(this.checked, this.hOpen, this.mOpen, this.hClose, this.mClose);
  }

  render() {

    const {disabled} = this.props;

    const switchProps = {
      checked: this.checked && !disabled, disabled: disabled
    };
    const checked = this.checked && !disabled;

    const modalProps = {
      choseHO: this.hOpen,
      choseMO: this.mOpen,
      choseHC: this.hClose,
      choseMC: this.mClose,
    };

    return (
      <View className='ocview'>
        <View className='oc_top_view'>
          <View className={checked ? 'oc_top_img.o' : 'oc_top_img'}>
          </View>
          <View className='oc_top_switch'>
            <Switch {...switchProps} className='switch' mStyle='transform: scale(.7)'
                    onChange={this.onChange}
            />
          </View>
        </View>

        <View className={checked ? 'time_title.o' : 'time_title'}>启动</View>
        <View className='time'>{`${this.hOpen}时${this.mOpen}分`}</View>
        <View className={checked ? 'time_title.o' : 'time_title'}>终止</View>
        <View className='end_time_view' onClick={() => {
            this.showChoseTime = true;
        }}>
          <View className='end_time_set'>{`${this.hClose}时${this.mClose}分`}</View>
          <View className="time_set_into"></View>
        </View>

        {
          this.showChoseTime &&
          <View style={{overflow: 'hidden'}}>
            <ModalMask onTouchStart={() => {
              this.showChoseTime = false
              LogService.debug("ModalMask onClick")
            }
            }/>
            <TimeChoseModal onCancell={() => this.showChoseTime = false} onComfire={this.onComfire} {...modalProps}/>
          </View>
        }
      </View>
    );
  }
}
